import React, { Component } from 'react'
import { connect } from 'react-redux'
import { Layout, Menu, Dropdown, Button } from 'antd';

import AntdIcon from '../../components/AntdIcon';
import './index.css'
import {
    logout
} from '../../api/auth'
import {
    removeLoginUser,
    getLoginUser
} from '../../utils/storage'
import { clearMenus } from '../../redux/actions/menus'

export class TraHeader extends Component {

    state = { username: '' }

    componentDidMount() {
        this.setState({
            username: getLoginUser()?.userName
        })
    }

    logout = () => {
        console.log('logout...')
        logout().then(res => {
            removeLoginUser()
            this.props.clearMenus()
        });
    }

    render() {
        const menu = (
            <Menu
                items={[
                    {
                        label: <Button type="link" onClick={this.logout} icon={<AntdIcon icon='LogoutOutlined' />}>退出</Button>,
                        key: '0',
                    }
                ]}
            />
        );
        return (
            <Layout.Header className="main-header">
                <div>
                    <span>header</span>
                    <Dropdown overlay={menu} trigger={['click']}>
                        <Button type="link" onClick={(e) => e.preventDefault()} icon={<AntdIcon icon='SettingOutlined' />}>
                            <span>{this.state.username}</span>
                        </Button>
                    </Dropdown>
                </div>
            </Layout.Header>
        )
    }
}

const mapStateToProps = (state) => ({
})

const mapDispatchToProps = {
    clearMenus
}

export default connect(mapStateToProps, mapDispatchToProps)(TraHeader)
